<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<meta name="Author" content="哈哈大王">
		<title>Document</title>
		<!-- <link rel="icon" href="../static/image/akl.ico" type="image/x-icon/"> -->
		<style>
		*{
			margin:0px;
			padding:0px;
			list-style:none;
		}
		body{
		perspective: 10000px;background-color:black;  
		}
		.bgc{
			position:relative;
			width:800px;
			height:800px;
			margin:50px auto;
		    background-color:transparent;  
		  transform: rotatex(80deg) rotatey(-45deg) ; 
			transform-style: preserve-3d;  
			transition:4s linear;
			}
		.bp{
			position:absolute;
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:700px;
			height:700px;
			border-radius:50%;
			border:5px red solid;
			margin:auto;
			 background-color:transparent;transform: translateZ(100px);animation:demo1 30s infinite linear;
			 }
		.z1{
			position:absolute;	
			margin:auto; 
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:100%;
			height:5px;
			background-image:
			 linear-gradient(to right,red 0px,red 5%,rgba(0,0,0,0) 5%,rgba(0,0,0,0) 95%,red 95%);
			}
		.dyc1{
			position:absolute;
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:600px;
			height:600px;
			margin:auto;
			border-radius:50%;
			border:20px pink solid;
			border-top-color:transparent; 
			border-bottom-color:transparent; 
			background-image:
			radial-gradient(circle,transparent 0px,transparent 280px,pink 280px,pink 301px,rgba(0,0,0,0) 300px);
			transform: translateZ(200px); animation:demo2 20s infinite linear;
		}
	.z1:nth-child(1){
		height:10px;
		background-image:
		linear-gradient(to right,red 0px,red 10%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,red 90%);
		}
		.z1:nth-child(2){
		transform:rotate(calc(1*6deg));
		}
		.z1:nth-child(3){
		transform:rotate(calc(2*6deg));
		}
		.z1:nth-child(4){
		transform:rotate(calc(3*6deg));
		}
		.z1:nth-child(5){
		transform:rotate(24deg));
		}
		.z1:nth-child(6){
		transform:rotate(calc(5*6deg));height:10px;
		background-image:
		linear-gradient(to right,red 0px,red 10%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,red 90%);
		}
		.z1:nth-child(7){
		transform:rotate(calc(6*6deg));
		}
		.z1:nth-child(8){
		transform:rotate(calc(7*6deg));
		}
		.z1:nth-child(9){
		transform:rotate(calc(8*6deg));
		}
		.z1:nth-child(10){
		transform:rotate(calc(9*6deg));
		}
		.z1:nth-child(11){
		transform:rotate(calc(10*6deg));height:10px;
		background-image:
		linear-gradient(to right,red 0px,red 10%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,red 90%);
		}
		.z1:nth-child(12){
		transform:rotate(calc(11*6deg));
		}
		.z1:nth-child(13){
		transform:rotate(calc(12*6deg));
		}
		.z1:nth-child(14){
		transform:rotate(calc(13*6deg));
		}
		.z1:nth-child(15){
		transform:rotate(calc(14*6deg));
		}
		.z1:nth-child(16){
		transform:rotate(calc(15*6deg));height:10px;
		background-image:
		linear-gradient(to right,red 0px,red 10%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,red 90%);
		}
		.z1:nth-child(17){
		transform:rotate(calc(16*6deg));
		}
		.z1:nth-child(18){
		transform:rotate(calc(17*6deg));
		}
		.z1:nth-child(19){
		transform:rotate(calc(18*6deg));
		}
		.z1:nth-child(20){
		transform:rotate(calc(19*6deg));
		}
		.z1:nth-child(21){
		transform:rotate(calc(20*6deg));height:10px;
		background-image:
		linear-gradient(to right,red 0px,red 10%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,red 90%);
		}
		.z1:nth-child(22){
		transform:rotate(calc(21*6deg));
		}
		.z1:nth-child(23){
		transform:rotate(calc(22*6deg));
		}
		.z1:nth-child(24){
		transform:rotate(calc(23*6deg));
		}
		.z1:nth-child(25){
		transform:rotate(calc(24*6deg));
		}
		.z1:nth-child(26){
		transform:rotate(calc(25*6deg));height:10px;
		background-image:
		linear-gradient(to right,red 0px,red 10%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,red 90%);
		}
		.z1:nth-child(27){
		transform:rotate(calc(26*6deg));
		}
		.z1:nth-child(28){
		transform:rotate(calc(27*6deg));
		}
		.z1:nth-child(29){
		transform:rotate(calc(28*6deg));
		}
		.z1:nth-child(30){
		transform:rotate(calc(29*6deg));
		}

	.dyc2{position:absolute;
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:500px;
			height:500px;
			margin:auto;
			border-radius:50%;
			border:20px yellow solid;
			border-left-color:transparent; 
			border-right-color:transparent; 
			background-image:
			radial-gradient(circle,transparent 0px,transparent 245px,yellow 245px,yellow 251px,rgba(0,0,0,0) 250px);
			transform: translateZ(100px); 
			animation:demo1 10s infinite linear;
			}
		.dyc3{position:absolute;
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:300px;
			height:300px;
			margin:auto;
			border-radius:50%;
			border:10px blue solid;
			border-left-color:transparent; 
			transform: translateZ(-150px);
			 animation:demo3 5s infinite linear; 
			}
		.dyc4{position:absolute;
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:200px;
			height:200px;
			margin:auto;
			border-radius:50%;
			border:10px green solid;
			border-right-color:transparent;
			animation:demo1 4s infinite linear;animation:demo4 2s infinite linear;
			transform: translateZ(-50px);}
		.dyc5{position:absolute;
			left:0;
			top:0;
			bottom:0;
			right:0;
			width:100px;
			height:100px;
			margin:auto;
			border-radius:50%;
			border:10px orange solid;
			border-left-color:transparent; 
			border-right-color:transparent; animation:demo5 1s infinite linear;
					}
		@keyframes demo1{
		0%{transform: rotate(0deg) translateZ(100px);}
		100%{transform: rotate(360deg) translateZ(100px);}
		}
		@keyframes demo2{
		0%{transform: rotate(0deg)  translateZ(200px);}
		100%{transform: rotate(-360deg)  translateZ(200px);}
		}
		@keyframes demo3{
		0%{
		transform: rotate(0deg)  translateZ(-150px);}
		100%{
		transform: rotate(-360deg) translateZ(-150px);}
		}
		@keyframes demo4{
		0%{
		transform: rotate(0deg)  translateZ(-50px);}
		100%{
		transform: rotate(-360deg) translateZ(-50px);}
		}
		@keyframes demo5{
		0%{
		transform: rotate(0deg);}
		100%{
		transform: rotate(-360deg);}
		}
		 .bgc:hover{ transform: rotatex(0deg) rotatey(0deg) ; } 
		</style>
	</head>
 <body>
	<div class="bgc">
		<div class="bp">
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
			<div class="z1"></div>
		</div>
		<div class="dyc1">
		
		</div>
		<div class="dyc2">
		
		</div>
		<div class="dyc3">
		
		</div>
		<div class="dyc4">
		
		</div>
		<div class="dyc5">
		
		</div>
	</div>
 </body>
</html>
